let t_dot = null; // 用于存储 dots 动画的定时器
let t_scroll = []; // 用于存储滚动到底部的定时器数组

/**
 * 启动 dots 动画，显示加载提示符（...）
 * @param {Ref<string>} dots - 响应式变量，用于存储 dots 的状态
 */
export function useDot(dots) {
  t_dot = setInterval(() => {
    if (dots.value.length === 3) {
      dots.value = ''; // 如果 dots 已经达到 3 个点，则重置为空
    } else {
      dots.value += '.'; // 否则增加一个点
    }
  }, 600); // 每 600 毫秒更新一次 dots
}

/**
 * 清除 dots 动画的定时器
 */
export function useClearDot() {
  clearInterval(t_dot); // 清除 dots 动画的定时器
  t_dot = null; // 重置定时器变量
}

/**
 * 启动自动滚动到底部的定时器
 * @param {Ref<HTMLElement>} dom - 需要滚动的 DOM 元素的引用
 */
export function useScrollToBottom(dom) {
  const t = setInterval(() => {
    if (dom.value) {
      dom.value.scrollTop = dom.value.scrollHeight - dom.value.clientHeight; // 滚动到底部
    }
  }, 200); // 每 200 毫秒滚动一次
  t_scroll.push(t); // 将定时器添加到数组中，便于后续清除
}

/**
 * 清除所有滚动到底部的定时器
 */
export function useClearScrollToBottom() {
  t_scroll.forEach((t) => {
    clearInterval(t); // 清除每个滚动定时器
  });
  t_scroll = []; // 重置定时器数组
}

/**
 * 根据鼠标滚轮事件控制是否自动滚动到底部
 * @param {WheelEvent} e - 鼠标滚轮事件
 * @param {Ref<HTMLElement>} dom - 需要滚动的 DOM 元素的引用
 * @param {Ref<boolean>} loading - 是否正在加载的响应式变量
 */
export function useWheelControlScrollToBottom(e, dom, loading) {
  if (e.deltaY < 0) {
    // 如果用户向上滚动，则停止自动滚动
    useClearScrollToBottom();
  } else if (loading.value) {
    // 如果用户向下滚动且正在加载，则启动自动滚动
    useScrollToBottom(dom);
  }
}